上篇文章算是正篇的最後一篇文。從這篇文章開始，會以實做web component的角度出發，從小規模使用，到建立組件庫。

推薦的最佳實踐方式

如果各位之前只有看過介紹web component的文章(比方說我前面寫的未完成版本)而沒有實做過，我推薦這篇文章，裡面有提到一些開發的實踐方式。Checklist的部分一共15條三大區塊，還有二個例子可以參考。我是認為如果只要做簡單的SPA中使用web component，看這篇文章就可以學到能做出夠用的web component。

個人心得-小規模使用

SSR的問題

考慮到不是所有的瀏覧器都有支援Declarative Shadow DOM技術，建議使用子元素+ slot的方法來顯示內容。如果要大規模的使用，建議使用建構web compoenent的套件來建構web component。

<my-card title='my-title' content='my-content'></my-card>
<-- 如果沒有Declarative Shadow DOM技術，至少還有DOM可以顯示 -->
<my-card>
<div slot="title">my-title</div>
<div slot="title">my-content</div>
<my-card>

input或select的web component

建議把input或select的web component包一個input或select，再把web component 的屬性和包含的子元素同步。因為如果父元素是form，form沒辦法收集web component的值。

<form>
<-- 比較不好 -->
<my-checkbox><my-checkbox>
<-- 比較好 -->
<my-checkbox>
<input type="checkbox">
<my-checkbox>
</form>

headless ui web component

如果各位想要做headless ui 的web component。恩，我有做過幾個，個人建議是想方法注入CSS到shadow DOM還比較簡單。